<template>
  <div class="app-container">

    <!-- from表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="automobileQueryVo.name" placeholder="汽车名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="automobileQueryVo.category" placeholder="请选择汽车级别">
          <el-option label="A" value="A"></el-option>
          <el-option label="B" value="B"></el-option>
          <el-option label="C" value="C"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-date-picker v-model="automobileQueryVo.createTime" type="datetime" placeholder="选择添加时间大于"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"></el-date-picker>
        <el-date-picker v-model="automobileQueryVo.updateTime" type="datetime" placeholder="选择修改时间小于"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"></el-date-picker>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData">清空</el-button>
    </el-form>

    <!--    table表格-->
    <el-table
          :data="list"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
          width="150"
          align="center"
      >
        <!--        id按照顺序 123456 排序-->
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="productName"
          label="汽车名称"
          width="150"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="productCategory"
          label="汽车级别"
          width="150"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="productPrice"
          label="汽车价格"
          width="150"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="productQuantity"
          label="汽车数量"
          width="150"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="productPrice"
          label="汽车价格"
          width="150"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="productDescribe"
          label="汽车描述"
          width="219"
          align="center"
      >
      </el-table-column>
      <el-table-column
          prop="fileName"
          label="汽车图片"
          width="250"
          align="center">

        <!--        scope获取每行的数据-->
        <template slot-scope="scope">
          <el-image style="width: 200px;height: 150px" :src="scope.row.fileName"></el-image>
        </template>

      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="300"
      >
        <!--        scope获取每一行的数据-->
        <template slot-scope="scope">
          <router-link :to="'/update/'+scope.row.id">
            <el-button type="warning" icon="el-icon-edit" @click="updateData(scope.row)">修改</el-button>
          </router-link>
          <el-button type="danger" @click="deleteById(scope.row.id)" icon="el-icon-close">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--
    分页器
    当前第几页,数据总页数，每一页展示条数，连续页码数
    @current-change="handleCurrentChange"
    :current-page代表当前第几页
    :total代表分页器需要展示数据的条数
    :page-size代表分页器每页需要展示的条数
    :page-sizes代表可以设置每页需要展示的条数
    layout:可以实现分页器布局
    pager-count按钮的数量 如果是6连续页码是4
-->
    <el-pagination
        style="margin-top: 20px;textAlign:center"
        :current-page="page"
        :total="total"
        :page-size="limit"
        layout="prev, pager, next,jumper,->,total"
        @current-change="getList"
    >
    </el-pagination>


  </div>
</template>

<script>

import automobile from "@/api/automobile";

export default {
  name: "listName",
  //写核心代码位置
  data() {  //定义变量和初始值
    return {
      list: [],  //查询之后接口返回集合
      page: 1,  //当前页
      limit: 6,  //每页记录数
      total: 0,  //总记录数
      fileName: '',
      automobileQueryVo: {}  //条件封装对象
    }
  },
  //页面渲染之前执行,一般调用methods定义的方法
  created() {
    //  调用方法
    this.getList();
  },

  //创建具体的方法,调用automobile.js定义的方法
  methods: {
    //  汽车列表的方法
    getList(page = 1) {
      this.page = page
      automobile.getAutomobileListPage(this.page, this.limit, this.automobileQueryVo)
          .then(response => {
            console.log(response) //response接口返回的数据
            this.list = response.data.data.records
            this.total = response.data.data.total
            console.log(this.list);
            console.log(this.total)
            console.log(this.list.fileName)


          }) //请求成功
          .catch(error => {
            console.log(error)
          }) //请求失败
    },
    //清空的方法
    resetData() {
      //  表单输入项数据清空
      this.automobileQueryVo = {};
      //  查询所有汽车数据
      this.getList();
    },

    //  删除汽车方法
    deleteById(id) {

      this.$confirm('此操作将永久删除汽车, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用删除的方法
        automobile.deleteAutomobileId(id)
            //删除成功后调用的方法
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //  回到列表页面
              this.getList();
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //  修改汽车的方法
    updateData(row) {
      console.log(row)
      // this.$router.push({
      //   path: '/update',
      // })
    }

  }

}
</script>

<style scoped>

</style>
